<template>
	<view class="container">
		<scroll-view scroll-y="true" class="scroll_cos" :class="[userInfo.roleId == 0?'have_btn':'not_btn']">
			<view class="scroll_cons">
				<!-- 头像信息 -->
				<view class="avatar uni-white-bg">
					<image :src="stuInfo.avatar" v-if="stuInfo.avatar" class="img img_radius"></image>
					<image v-else class="img img_radius"
						src="https://lives-1308318918.cos.ap-shanghai.myqcloud.com/images/default.png"></image>
				</view>

				<view class="box_container">
					<view class="student-info" v-for="(item, key) in studentList" :key="key"
						@click="makePhoneCall(item)">
						<view class="key">{{item.label}}</view>
						<view class="value two-line flex1">
							{{item.value}}
							<uni-icons v-if="item.label.indexOf('电话') != -1" type="phone-filled" size="20"
								class="uni-ml-4" color="#007aff"></uni-icons>
						</view>
					</view>
				</view>

				<view style="height: 20rpx"></view>
				<view class="box_container" v-if="userInfo.roleId != 0" v-for="(teaItem, tea) in teacherList"
					:key="tea">
					<view class="student-info" v-for="(item, key) in teaItem" :key="key">
						<view class="key">{{item.label}}</view>
						<view class="value two-line flex1">{{item.value}}</view>
					</view>
				</view>
			</view>
		</scroll-view>

		<button class='modifyBnt' formType="submit" @click="go()" v-if="userInfo.roleId == 0">信息修改</button>
		<!-- <button class='modifyBnt' formType="submit" @click="goXieyi()" v-else>家长协议</button> -->

	</view>
</template>

<script>
	import {
		getArticleBannerList
	} from '@/api/api.js'
	import {
		getSchoolRole
	} from '@/api/user.js'
	import {
		mapGetters
	} from "vuex";
	export default {
		computed: mapGetters(['isLogin', 'userInfo']),
		data() {
			return {
				stuInfo: {},
				avatar: 'https://lives-1308318918.cos.ap-shanghai.myqcloud.com/img/set_pic.png',
				stuid: null,
				teacherList: [],
				studentList: []
			}
		},

		onLoad(op) {
			this.stuid = op.stuid;
		},

		onShow() {
			this.getStuInfo();
			if (this.userInfo.roleId != 0) {
				//获取这个学生的所有营期信息
				this.getStuClassInfo();
			}
		},

		methods: {

			makePhoneCall(item) {
				if (item.label.indexOf('电话') != -1) {
					uni.makePhoneCall({
						phoneNumber: item.value
					})
				}
			},

			go() {
				uni.navigateTo({
					url: `/pages/students/trainees/index?stuId=${this.stuInfo.stuId}`
				})
			},

			//点击去查看家长协议
			goXieyi() {

			},

			getStuInfo(stuId) {
				this.m_show("加载中");
				getArticleBannerList(this.stuid).then(res => {
					this.m_hide();
					let {
						data
					} = res
					// "学籍编号",
					let dataList = ["学员姓名", "性别", "联系电话",  "生日", "年龄", "身份证号码", "父亲姓名", "父亲联系电话", "母亲姓名",
						"母亲联系电话"
					];
					this.studentList = dataList.map(item => {
						let value = ""
						if (item == '学员姓名') {
							value = data.realName;
						}
						if (item == '性别') {
							value = data.sexName;
						}
						if (item == '联系电话') {
							value = data.phone;
						}
						if (item == '生日') {
							value = data.birthday;
						}
						if (item == '年龄') {
							value = data.age;
						}
						if (item == '身份证号码') {
							value = data.idCard;
						}
						// if (item=='学籍编号') {
						// 	value = data.stuId;
						// }
						if (item == '父亲姓名') {
							value = data.fatherName;
						}
						if (item == '父亲联系电话') {
							value = data.fatherPhone;
						}
						if (item == '母亲姓名') {
							value = data.motherName;
						}
						if (item == '母亲联系电话') {
							value = data.motherPhone;
						}
						return {
							label: item,
							value
						}
					})
					this.stuInfo = data;
				})
			},

			//获取当前学员的营期信息
			getStuClassInfo() {
				getSchoolRole({
					status: -1,
					stuId: this.stuid
				}).then(res => {
					let arr = ["课程信息", "营期信息","班级名称", "校区名称",  "年龄范围", "创建时间"];
					this.teacherList = res.data.map(item => {
						let back = arr.map(val => {
							let value = "";
							if (val == '班级名称') {
								value = item.classTag;
							}
							if (val == '校区名称') {
								value = item.schoolName;
							}
							if (val == '营期信息') {
								value = item.attrName;
							}
							if (val == '课程信息') {
								value = item.className;
							}
							if (val == '年龄范围') {
								value = item.start + "岁至" + item.end + "岁";
							}
							if (val == '创建时间') {
								value = item.createTime;
							}
							return {
								label: val,
								value
							}
						})
						return back;
					})
					console.log(res);
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.have_btn {
		bottom: 140rpx;
	}

	.not_btn {
		bottom: 0;
	}

	.scroll_cos {
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}

	.box_container {
		border-radius: 10rpx;
		background-color: white;
	}

	.img_radius {
		border-radius: 75rpx;
	}

	.avatar {
		width: 150rpx;
		height: 150rpx;
		margin: 20rpx auto;
		border-radius: 70rpx;

		.img {
			width: 100%;
			height: 100%;
		}
	}

	.student-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 20rpx;
		padding: 20rpx 0;
		border-bottom: solid 1px #eee;

		// background-color: white;
		.key {
			color: #C0C4C1;
			font-size: 32rpx;
			width: 210rpx;
		}

		.value {
			font-size: 32rpx;
			text-align: right;
		}
	}

	.container {
		height: 100vh;
		padding: 20rpx;
	}

	.modifyBnt {
		font-size: 32rpx;
		color: #fff;
		border-radius: 20rpx;
		text-align: center;
		line-height: 90rpx;
		position: absolute;
		left: 50rpx;
		right: 50rpx;
		height: 90rpx;
		bottom: 20rpx;
		background-color: #007E51;
	}
</style>